<template>
  <el-container class="main-layout">
    <el-header class="main-top">当前位置：{{ fullPath }}</el-header>
    <el-main class="main-content">
      <el-scrollbar>
        <router-view></router-view>
      </el-scrollbar>
    </el-main>
  </el-container>
</template>

<script>
  // import { ref, reactive, computed, onMounted, watch, toRefs } from 'vue'
  import { getMenuInfo } from '@/router'
  export default {
    name: '', // 模块描述
    components: {},
    props: {},
    // setup(props, context) {
    //   // Attribute (非响应式对象) context.attrs
    //   // 插槽 (非响应式对象) context.slots
    //   // 触发事件 (方法) context.emit
    //   // 定义变量 ref(0)、reactive({})、toRefs(props)
    //   // 计算属性 computed(() => value )
    //   // 页面渲染后 onMounted(() => {})
    //   // 监听 watch(key, (newValue, oldValue) => {})
    // },
    data() {
      return {}
    },
    // 计算属性
    computed: {
      fullPath() {
        const menuItem = getMenuInfo(this.$route.name)
        let path = ''
        if (menuItem.pId) {
          path += menuItem.pTitle + '>>'
        }
        path += menuItem.title
        return path
      },
    },
    // 监听事件
    watch: {},
    // 页面渲染前
    created() {},
    // 页面渲染后
    mounted() {},
    // 方法
    methods: {},
  }
</script>

<style lang="scss" scoped>
  .main-layout {
    height: 100%;
    .main-top {
      height: 38px;
      line-height: 38px;
      padding: 0 10px;
      border-bottom: 1px solid #dcdfe6;
    }
    .main-content {
      padding: 5px;
    }
  }
</style>
